<template>
  <div class="box">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>个人信息</span>
      </div>
      <div>
        <ul>
          <li>
            <img :src="userList.img">
          </li>
          <li>
            <div class="name">
              <i class="el-icon-user-solid"></i>
              <span>用户名称</span>
            </div>
            <div>
              {{userList.userName}}
            </div>
          </li>
          <li>
            <div class="name">
              <Icon>
                <AodFilled />
              </Icon>
              <span>手机号码</span>
            </div>
            <div>
              {{userList.photo}}
            </div>
          </li>
          <li>
            <div class="name">
              <Icon>
                <EmailFilled />
              </Icon>
              <span>用户邮箱</span>
            </div>
            <div>
              {{userList.email}}
            </div>
          </li>
          <li>
            <div class="name">
              <Icon>
                <DeviceHubRound />
              </Icon>
              <span>所属部门</span>
            </div>
            <div>
              {{userList.department}}
            </div>
          </li>
          <li>
            <div class="name">
              <Icon>
                <PeopleAltFilled />
              </Icon>
              <span>所属角色</span>
            </div>
            <div class="name">
              {{userList.role}}
            </div>
          </li>
          <li>
            <div class="name">
              <Icon>
                <DateRangeFilled />
              </Icon>
              <span>创建日期</span>
            </div>
            <div>
              {{userList.creationDate}}
            </div>
          </li>
        </ul>
      </div>
    </el-card>
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>基本资料</span>
      </div>
      <div>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="基本资料"
            name="basicInformation"
          >
            <el-form
              ref="information"
              :model="information"
              label-width="90px"
              :rules="rules"
            >
              <el-form-item
                label="用户昵称"
                prop="nickName"
              >
                <el-input
                  v-model="information.nickName"
                  placeholder="请输入用户昵称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="手机号码"
                prop="phoneNumber"
              >
                <el-input
                  v-model="information.phoneNumber"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="邮箱"
                prop="email"
              >
                <el-input
                  v-model="information.email"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="性别"
                prop="Gender"
              >
                <el-radio-group v-model="information.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click="BasicInformation"
                >提交</el-button>
                <el-button
                  size="small"
                  @click="close"
                >清除</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            label="修改密码"
            name="changePassword"
          >
            <el-form
              ref="changePassword"
              :model="password"
              label-width="90px"
              :rules="rulesPassword"
            >
              <el-form-item
                label="旧密码"
                prop="oldPassword"
              >
                <el-input
                  v-model="password.oldPassword"
                  placeholder="请输入旧密码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="新密码"
                prop="newPassword"
              >
                <el-input
                  v-model="password.newPassword"
                  placeholder="请输入新密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item
                label="确认密码"
                prop="confirmPassword"
              >
                <el-input
                  v-model="password.confirmPassword"
                  placeholder="请确认密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click="ChangePassword"
                >提交</el-button>
                <el-button
                  size="small"
                  @click="closePassword"
                >清除</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="logo">山河同悲 · 云</div>
    </el-card>
  </div>
</template>

<script>
// 图标库
import {
  AodFilled, EmailFilled, DeviceHubRound,
  PeopleAltFilled, DateRangeFilled
} from '@v2icons/material'
import { Icon } from '@v2icons/utils'
export default {
  name: 'Index',
  components: {
    Icon,
    AodFilled,
    EmailFilled,
    DeviceHubRound,
    PeopleAltFilled,
    DateRangeFilled
  },
  data () {
    // 手机号校验
    var checkphone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!this.isCellPhone(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    // 邮箱校验
    var checkemail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else if (!this.isCellEmail(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的邮箱!'))
      } else {
        callback()
      }
    }
    // 密码校验
    var checkpassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!this.isCellPassword(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('密码须包含数字、字母两种元素，且密码位数为6-16位！'))
      } else {
        callback()
      }
    }
    return {
      // 个人信息
      userList: {
        img: require('../../assets/touxiang.png'),
        userName: 'admin',
        photo: '15534461445',
        email: 'zyx15534461445@163.com',
        department: '董事长',
        role: '超级管理员',
        creationDate: '2022-1-13 20:00:00'
      },
      activeName: 'basicInformation', // tab标签默认选择项
      // 基本资料
      information: {
        nickName: '', // 用户昵称
        phoneNumber: '', // 手机号码
        email: '', // 邮箱
        gender: '' // 性别
      },
      // 密码修改
      password: {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码
      },
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, validator: checkphone, trigger: 'blur' },
          { min: 6, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, validator: checkemail, trigger: 'blur' }
        ]
      },
      // 密码修改校验
      rulesPassword: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, validator: checkpassword, trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 基本资料提交
    BasicInformation () {
      console.log('this.information :>> ', this.information)
    },
    // 密码提交
    ChangePassword () {
      console.log('this.password :>> ', this.password)
    },
    // 取消按钮
    close () {
      // 清空表单
      this.information = {
        nickName: '', // 用户昵称
        phoneNumber: '', // 手机号码
        email: '', // 邮箱
        gender: '' // 性别
      }
      this.cleanValidate('information')
    },
    closePassword () {
      this.password = {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码
      }
      this.cleanValidate('changePassword')
    },
    // -------------------------------------公用方法----------------------------------------
    // 检查手机号
    isCellPhone (val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    // 检查邮箱
    isCellEmail (val) {
      if (!/^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/.test(val)) {
        return false
      } else {
        return true
      }
    },
    // 检查密码
    isCellPassword (val) {
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    // 清除表单校验
    cleanValidate (formName) {
      // 清除表单校验的提示
      if (this.$refs[formName]) {
        // 延时执行
        this.$nextTick(function () {
          this.$refs[formName].clearValidate()
        })
      };
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  display: flex;
  .box-card{
    height: calc(100vh - 80px);
  }
}
.el-card:nth-child(1) {
  width: 450px;
  margin-right: 10px;
}
.el-card:nth-child(2) {
  width: calc(100vw - 670px);
  position: relative;
}

ul > li:nth-child(1) {
  display: flex;
  justify-content: center;
  img {
    width: 200px;
    height: 200px;
  }
}

ul > li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #6671d157;
  padding: 10px;
  overflow: hidden;
  .name {
    width: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.logo {
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: rgba(32, 30, 30, 0.466);
  font-family: "BaiZhouTaiZhuanShuTiCu";
}
.el-form {
  margin-top: 20px !important;
}
</style>
